<template>
  <div class="data-container">
    <analysis-home></analysis-home>
    <div class="analysis1-main">
      <div class="analysis1-main-content">
        <el-row>
          <el-col :span="6">
            <div class="box-card item">              
              <box-card-single-analysis-1-huanzhetongji title="患者统计"></box-card-single-analysis-1-huanzhetongji>
            </div>
            <div class="box-card item">
              <box-card-single-analysis-1-huanzhenianling title="患者年龄段统计"></box-card-single-analysis-1-huanzhenianling>
            </div>
            <div class="box-card item">
              <box-card-single-analysis-1-nannvbili title="男女比例统计"></box-card-single-analysis-1-nannvbili>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="map">
              <!-- <img src="@/assets/images/map.png" alt=""> -->
              <box-card-map-analysis-1></box-card-map-analysis-1>
            </div>
            <el-col class="h-1-3" :span="12" >
              <div class="chart5 h-1-3">
                <box-card-single-analysis-1-menzhenzongshouru title="门诊总收入统计"></box-card-single-analysis-1-menzhenzongshouru>
              </div>
            </el-col>
            <el-col class="h-1-3" :span="12">
              <div class="chart6  h-1-3">
                <box-card-single-analysis-1-zhuyuanzongshouru title="住院总收入"></box-card-single-analysis-1-zhuyuanzongshouru>
              </div>
            </el-col>
          </el-col>
          <el-col :span="6">
            <div class="box-card item">
              <box-card-multi-analysis-1-yiji title="医技统计" :items="items1"></box-card-multi-analysis-1-yiji>
            </div>
            <div class="box-card item">
              <box-card-multi-analysis-1-jianchajianyan title="检查/验人数统计" :items="items2"></box-card-multi-analysis-1-jianchajianyan>
            </div>
            <div class="box-card item">
              <box-card-single-analysis-1-nianduzongshour title="年度收入"></box-card-single-analysis-1-nianduzongshour>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import analysisHome from './analysisHome'
import BoxCardMultiAnalysis1Jianchajianyan from './components/box-card-multi-analysis1-jianchajianyan.vue';
import BoxCardMultiAnalysis1Yiji from './components/box-card-multi-analysis1-yiji.vue';
import BoxCardSingleAnalysis1Huanzhenianling from './components/box-card-single-analysis1-huanzhenianling.vue';
import BoxCardSingleAnalysis1Nannvbili from './components/box-card-single-analysis1-nannvbili.vue';
import BoxCardSingleAnalysis1Menzhenzongshouru from './components/box-card-single-analysis1-menzhenzongshouru.vue';
import BoxCardSingleAnalysis1Nianduzongshour from './components/box-card-single-analysis1-nianduzongshour.vue';
import BoxCardSingleAnalysis1Zhuyuanzongshouru from './components/box-card-single-analysis1-zhuyuanzongshouru.vue';
import BoxCardSingleAnalysis1Huanzhetongji from './components/box-card-single-analysis1-huanzhetongji.vue';
import BoxCardMapAnalysis1 from './components/box-card-map-analysis1.vue';

export default {
  name:'analysis1',
  components: {
    analysisHome,
    BoxCardMultiAnalysis1Jianchajianyan,
    BoxCardMultiAnalysis1Yiji,
    BoxCardSingleAnalysis1Huanzhenianling,
    BoxCardSingleAnalysis1Nannvbili,
    BoxCardSingleAnalysis1Menzhenzongshouru,
    BoxCardSingleAnalysis1Nianduzongshour,
    BoxCardSingleAnalysis1Zhuyuanzongshouru,
    BoxCardSingleAnalysis1Huanzhetongji,
    BoxCardMapAnalysis1 
  },
  data() {
   return {
      time:null,
      curId1:0,
      items1:[
        {
          id:0,
          label:'2020',
        },{
          id:1,
          label:'2019'
        }
      ],
      curId2:0,
      items2:[
        {
          id:0,
          label:'检查趋势',
        },{
          id:1,
          label:'检验趋势'
        }
      ]
    };
  },

  methods: {
    // 饼图
    // https://www.makeapie.com/editor.html?c=xG3GJsBZ0K
    // 水球图
    // https://www.makeapie.com/editor.html?c=xEo14eUPct
    // 柱状图
    // https://www.makeapie.com/editor.html?c=xXSAXgHtnG
    // 折线图
    // https://www.makeapie.com/editor.html?c=x7OfrOzSlj
    // https://www.makeapie.com/editor.html?c=xklYtZRN3Y
    // 幸福指数饼图
    // https://www.makeapie.com/editor.html?c=xr1cX-zkWl&v=5
  },
};
</script>

<style scoped lang="less">
.left{float: left;}
.right{float: right;}
.red{ background: red;}
.green{ background: green;}
.blue{ background: blue;}
.data-container{
  background:url('~@/assets/images/large-bg.png') no-repeat;
  height: 100%;
  background-size:cover;
  background-position: center center;
  .analysis1-main{
    .analysis1-main-content{
      padding:.1rem;
      .el-row{
        height: calc(100vh - 1.23rem);
        .el-col{
          height:calc(100vh - 1.23rem);
          .borderBottom-1px{
            border-bottom: .01rem solid #7787C7 ;
          }
          .borderBottom-2px{
            border-bottom: .02rem solid #7787C7 ;
          }
          .box-card{
            width: 98%;
            margin-left: 1%;
            margin-right: 1%;
            height:calc( (100vh - 1.23rem) / 3 );
          }
          .map{
            height:calc( (100vh - 1.23rem) * 2 / 3 );
            img{
              width: 100%;
              height: 100%;
            }
          }
          .h-1-3{height:calc( (100vh - 1.23rem) / 3 ) !important;}
          .chart5{margin-right: 1%;}
          .chart6{margin-left: 1%;}
        }
      }
    }
  }
}
</style>

